<template>
    <section class="embroidery-colors" :beforeRate="beforeRate">
        <div class="embroidery-colors-container" :style="renderStyle">
            <div class="embroidery-colors-container-description">
                <h2><span>Embrace 15-Color Embroidery</span></h2>
                <p>
                    Unleash your creativity with our <strong><em>15-color embroidery</em></strong>, far exceeding<br />
                    the 6-color industry standard. You can blend up to 15 colors <br />
                    simultaneously to create captivating designs.
                </p>
            </div>
            <div class="embroidery-colors-container-example" :class="{ expend: scroll > 0, retract: scroll == 0 }">
                <figure>
                    <img src="https://img.podpartner.com/static/images-20240628/emb-colors-1-hover.png?x-oss-process=image/format,webp"
                        alt="">
                </figure>
                <figure>
                    <img src="https://img.podpartner.com/static/images-20240628/emb-colors-2-hover.png?x-oss-process=image/format,webp"
                        alt="">
                </figure>
            </div>
        </div>
    </section>
</template>
<script>
export default {
    props: {
        screen_height: {
            type: Number,
            default: 0
        },
        cur_scroll: {
            type: Number,
            default: 0
        },
        scroll: {
            type: Number,
            default: 0
        },
        rate: {
            type: Number,
            default: 0
        },
        scale: {
            type: Number,
            default: 0
        },
        range: {
            type: Number,
            default: 0
        },
    },
    data () {
        return {
            halfHeight: 0
        }
    },
    computed: {
        renderStyle () {
            const style = { transform: `scale(${this.scale})` }
            if (this.scroll) {
                if (this.scroll < this.screen_height / 2) {
                    Object.assign(style, {
                        position: 'fixed',
                        top: '78px',
                        transform: `scale(${this.scale})`
                    })
                } else {
                    Object.assign(style, {
                        position: 'absolute',
                        bottom: `0`,
                        transform: `scale(${this.scale})`
                    })
                }
            }
            return style
        },
        beforeRate () {
            const scroll = Math.max(this.cur_scroll - this.screen_height * 0.5, 0); // 触发阈值的滚动值
            return this.$clamp(0, scroll / ((this.screen_height * 0.5)), 1)

        },
    },
    watch: {
        cur_scroll: {
            handler: function (v) {
                const color = 255 - 200 * (this.beforeRate - (this.rate == 1 ? 1 : 0))
                this.$emit('setBackground', color)
            },
            deep: true
        }
    },
    methods: {}
}
</script>
<style scoped lang="scss">
.embroidery-colors {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: calc(var(--screen-height) * 1.5);
    min-height: auto;
}

.embroidery-colors-container {
    width: 1606px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: var(--screen-height);

    .embroidery-colors-container-description {
        width: 806px;

        h2 {
            font-family: Roboto-Medium, Roboto;
            font-weight: 500;
            font-size: 60px;
            color: #000000;
            line-height: 80px;
            position:relative;
            overflow:hidden;

            span{
                display:block;
                transform:scale(1.01);
                background: linear-gradient(135deg, #E53BAC 0%, #EDB002 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;    
            }
            
        }

        p {
            height: 144px;
            font-family: Roboto-Regular, Roboto;
            font-weight: 400;
            font-size: 26px;
            color: #ffffff;
            line-height: 48px;

            strong {
                display:inline-block;
                vertical-align: middle;
                position:relative;
                overflow:hidden;
                em{
                    display:block;
                    transform:scale(1.01);
                    background: linear-gradient(135deg, #E53BAC 0%, #EDB002 100%);
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                }
            }
        }
    }

    .embroidery-colors-container-example {
        width: 720px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;

        @keyframes expendImages {
            0% {
                transform: translateY(0);
            }

            100% {
                transform: translateY(var(--imgTransY));
            }
        }

        @keyframes retractImages {
            0% {
                transform: translateY(var(--imgTransY));
            }

            100% {
                transform: translateY(0);
            }
        }

        &.expend {
            figure {
                animation: expendImages 0.5s ease-in-out forwards;
            }
        }

        &.retract {
            figure {
                animation: retractImages 0.5s ease-in-out forwards;
            }
        }

        figure {
            position: absolute;
            width: 600px;
            height: 386px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-size: 600px auto;
            background-position: right bottom;
            border-radius: 10px;
            transition: all 0.3s;

            // cursor: pointer;
            img {
                display: none;
            }

            &:nth-child(1) {
                background-image: url('https://img.podpartner.com/static/images-20240628/emb-colors-1.png?x-oss-process=image/format,webp');
                --imgTransY: 198px;


            }

            &:nth-child(2) {
                background-image: url('https://img.podpartner.com/static/images-20240628/emb-colors-2.png?x-oss-process=image/format,webp');
                --imgTransY: -198px;
            }

            &:hover {
                background-size: 810px auto;
            }
        }
    }
}

.embroidery-colors.animation-none {
    box-sizing: border-box;
    margin-top: 60px;
    padding: 60px 14px;
    height: auto;
    background-color: #333333;

    .embroidery-colors-container {
        position: static !important;
        height: auto;
        transform: none !important;
        min-height: auto;
        width: 100%;
        flex-direction: column;

        .embroidery-colors-container-description {
            width: auto;

            h2 {
                font-size: 24px;
                line-height: 28px;
                color: #000000;
                margin-bottom: 14px;
            }

            p {
                height: auto;
                font-weight: 400;
                font-size: 16px;
                color: #F5F5F5;
                line-height: 24px;

                br {
                    display: none;
                }
            }
        }
    }

    .embroidery-colors-container-example {
        margin-top: 10px;
        box-sizing: border-box;
        flex-direction: column;
        width: 100%;

        figure {
            margin-top: 10px;
            box-sizing: border-box;
            width: 100%;
            height: auto;
            position: relative;
            background-image: none;
            overflow: hidden;
            animation: none;

            img {
                width: 100%;
                display: block;
                border-radius: 10px;
            }
        }
    }

    .embroidery-colors-container+section {
        display: none;
    }
}
</style>